import 'package:flutter/material.dart';
import 'components/order_tab_bar.dart';
import 'components/order_item.dart';

class OrderPage extends StatefulWidget {
  const OrderPage({super.key});

  @override
  State<OrderPage> createState() => _OrderPageState();
}

class _OrderPageState extends State<OrderPage>
    with SingleTickerProviderStateMixin {
  late TabController _tabController;
  final List<String> _tabs = ['全部', '待付款', '待发货', '待收货', '待评价'];

  final List<Map<String, dynamic>> _orderList = [
    {
      'id': '1',
      'time': '2023-12-23 18:03:24',
      'status': 'pending_payment',
      'statusText': '待付款',
      'productName': 'DIOR 迪奥 LADY D-JOY 中号羊皮格纹女士手提包',
      'productImage': 'assets/images/bag.png',
      'productSize': 'L',
      'productColor': '黑色',
      'price': 25.00,
      'count': 1,
    },
    {
      'id': '1',
      'time': '2023-12-23 18:03:24',
      'status': 'pending_payment',
      'statusText': '待付款',
      'productName': 'DIOR 迪奥 LADY D-JOY 中号羊皮格纹女士手提包',
      'productImage': 'assets/images/bag.png',
      'productSize': 'L',
      'productColor': '黑色',
      'price': 25.00,
      'count': 1,
    },
    {
      'id': '1',
      'time': '2023-12-23 18:03:24',
      'status': 'pending_payment',
      'statusText': '待付款',
      'productName': 'DIOR 迪奥 LADY D-JOY 中号羊皮格纹女士手提包',
      'productImage': 'assets/images/bag.png',
      'productSize': 'L',
      'productColor': '黑色',
      'price': 25.00,
      'count': 1,
    },
    {
      'id': '1',
      'time': '2023-12-23 18:03:24',
      'status': 'pending_payment',
      'statusText': '待付款',
      'productName': 'DIOR 迪奥 LADY D-JOY 中号羊皮格纹女士手提包',
      'productImage': 'assets/images/bag.png',
      'productSize': 'L',
      'productColor': '黑色',
      'price': 25.00,
      'count': 1,
    },
    {
      'id': '1',
      'time': '2023-12-23 18:03:24',
      'status': 'pending_payment',
      'statusText': '待付款',
      'productName': 'DIOR 迪奥 LADY D-JOY 中号羊皮格纹女士手提包',
      'productImage': 'assets/images/bag.png',
      'productSize': 'L',
      'productColor': '黑色',
      'price': 25.00,
      'count': 1,
    },
    {
      'id': '1',
      'time': '2023-12-23 18:03:24',
      'status': 'pending_payment',
      'statusText': '待付款',
      'productName': 'DIOR 迪奥 LADY D-JOY 中号羊皮格纹女士手提包',
      'productImage': 'assets/images/bag.png',
      'productSize': 'L',
      'productColor': '黑色',
      'price': 25.00,
      'count': 1,
    },
    {
      'id': '1',
      'time': '2023-12-23 18:03:24',
      'status': 'pending_payment',
      'statusText': '待付款',
      'productName': 'DIOR 迪奥 LADY D-JOY 中号羊皮格纹女士手提包',
      'productImage': 'assets/images/bag.png',
      'productSize': 'L',
      'productColor': '黑色',
      'price': 25.00,
      'count': 1,
    },
  ];

  @override
  void initState() {
    super.initState();
    _tabController = TabController(length: _tabs.length, vsync: this);
  }

  @override
  void dispose() {
    _tabController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: const Color(0xFFF5F5F5),
      appBar: AppBar(
        backgroundColor: Colors.white,
        elevation: 0,
        leading: IconButton(
          icon: const Icon(Icons.arrow_back_ios, size: 20),
          onPressed: () => Navigator.pop(context),
        ),
        title: const Text(
          '我的订单',
          style: TextStyle(
            fontSize: 18,
            fontWeight: FontWeight.w500,
            color: Color(0xFF333333),
          ),
        ),
        actions: [
          IconButton(
            icon: const Icon(Icons.more_horiz),
            onPressed: () {},
          ),
        ],
      ),
      body: Column(
        children: [
          OrderTabBar(
            tabs: _tabs,
            controller: _tabController,
          ),
          Expanded(
            child: ListView.builder(
              padding: const EdgeInsets.symmetric(horizontal: 12),
              itemCount: _orderList.length,
              itemBuilder: (context, index) {
                return OrderItem(
                  orderInfo: _orderList[index],
                );
              },
            ),
          ),
        ],
      ),
    );
  }
}
